<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>生意参谋</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="../static/js/js.js"></script>
    <link href="../static/css/common.css" rel="stylesheet">
</head>

<body>
<div class="loading" style="display: none;">
    <div class="loadbox"><img src="../static/images/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>生意参谋大数据</h1>
    <div class="weather"><span id="currentTime"></span></div>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height:5.5rem">
                <div class="addnew">
                    <div class="tit02"><span>品牌榜TOP 10</span></div>
                    <div class="adduser" id="brand">
                        <ul class="clearfix">
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall">
                <div class="addnew">
                    <div class="tit02"><span>订单金额（元）</span></div>
                    <div id="chart_2" class="chart t_btn9" style="width:100%;height: 280px;"></div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li id="payOrderNum" class="pulll_left counter" val="0">0</li>
                        <li id="payAmt" class="pulll_left counter" val="0">0</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">支付订单数</li>
                        <li class="pulll_left">支付总金额</li>
                    </ul>
                </div>
                <div class="barbox">
                    <ul class="clearfix">
                        <li id="payCustomer" class="pulll_left counter" val="0">0</li>
                        <li id="orderQty" class="pulll_left counter" val="0">0</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">支付客户数</li>
                        <li class="pulll_left">下单件数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div id="chart_map" style="width:100%;height:610px;"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:5.5rem">
                <div class="addnew">
                    <div class="tit02"><span id="productRankTitle">商品榜TOP 10</span></div>
                    <div class="adduser" id="product">
                        <ul class="clearfix">
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li id="li_category">
            <div class="boxall" style="height:3.4rem">
                <div class="addnew">
                    <div class="tit02"><span>商品类目</span></div>
                    <div class="adduser" id="category">
                        <ul class="clearfix">
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li id="li_channel" style="display: none">
            <div class="boxall" style="height:3.4rem">
                <div class="addnew">
                    <div class="tit02"><span>销售渠道</span></div>
                    <div class="adduser" id="channel">
                        <ul class="clearfix">
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>

</div>
<div class="back"></div>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>
<script type="text/javascript" src="../static/js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="../static/js/countUp.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        run();
        getMain();
        getPayCustomer();
        $("#currentTime").text((new Date()).format("yyyy-MM-dd hh:mm:ss"));
        setInterval(function () {
            getMain();
            getPayCustomer();
            $("#currentTime").text((new Date()).format("yyyy-MM-dd hh:mm:ss"));
        }, 1000);

        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function () {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({marginTop: 0})
                $(".wrap ul").animate({marginTop: -'.52' * i + 'rem'}, 1000)
            }
            $(".wrap ul").animate({marginTop: -'.52' * i + 'rem'}, 1000)
        }, 2400);

        var categoryIndex = 0;
        var category = ['OTC','成人用品','医疗器械','处方药','保健用品'];
        getBrand();
        getWareCategory();
        getPayAmountByChannel();
        getRank(category[categoryIndex]);
        setInterval(function () {
            getBrand();
            getWareCategory();
            getPayAmountByChannel();
            categoryIndex = (++categoryIndex) % category.length;
            getRank(category[categoryIndex]);
        }, 10000);

        setInterval(function () {
            $("#li_category").toggle();
            $("#li_channel").toggle();
        }, 15000);
    });
    
    function run() {
        $.ajax({
            type: "get",
            url: "http://192.168.8.206:8484/home/listProvenceSaleAmount",
            success: function (data) {
                console.log(data);
            }
        });
    }

    function getBrand() {
        $.ajax({
            type: "get",
            url: "/data/getTopNSalesByBrand",
            data: {topN: 10},
            success: function (data) {
                var ulHtml = "";
                for (var i = 0; i < data.length; i++) {
                    ulHtml += "<li class='clearfix'><span class='pulll_left'>TOP" + (i + 1) + " " +
                        (data[i].brandName.length > 25 ? (data[i].brandName.substr(0, 25) + "...") : data[i].brandName) +
                        "</span><span class='pulll_right'>" + formatNumber(data[i].salesAmount) + "</span></li>";
                }
                $("#brand ul").html(ulHtml);
            }
        })
    }

    function getWareCategory() {
        $.ajax({
            type: "get",
            url: "/data/listSalesAmountByWareCategory",
            success: function (data) {
                var ulHtml = "", sumQty = 0;
                for (var i = 0; i < data.length; i++) {
                    sumQty += data[i].qty;
                    ulHtml += "<li class='clearfix'><span class='pulll_left'> " + data[i].virtualCategory +
                        "</span><span class='pulll_right'>" + formatNumber(data[i].salesAmount) + "</span></li>";
                }
                $("#category ul").html(ulHtml);

                var options = {
                    useEasing: true,  // 过渡动画效果，默认ture
                    useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
                    separator: ',',   // 使用千分位时分割符号
                    decimal: '.',   // 小数位分割符号
                    prefix: '',    // 前置符号
                    suffix: '',    // 后置符号，可汉字
                    startVal: sumQty >= Number($("#orderQty").text().replace(/,/g, "")) ? Number($("#orderQty").text().replace(/,/g, "")) : 0
                }
                var num1 = new CountUp('orderQty', sumQty, options);
                num1.start();
            }
        })
    }

    function getRank(category) {
        $.ajax({
            type: "get",
            url: '/data/getTopNProduct',
            data: {virtualCategory: category, topN: 10},
            success: function (data) {
                var ulHtml = "";
                for (var i = 0; i < data.length; i++) {
                    ulHtml += "<li class='clearfix'><span class='pulll_left'>TOP" + (i + 1) + " " +
                        (data[i].wareName.length > 20 ? (data[i].wareName.substr(0, 20) + "...") : data[i].wareName) +
                        "</span><span class='pulll_right'>" + data[i].qty + data[i].unitName || '个' + "</span></li>";
                }
                $("#productRankTitle").text("(" + category + ") 商品榜TOP 10");
                $("#product ul").html(ulHtml);
            }
        })
    }
    
    function getPayAmountByChannel() {
        $.ajax({
            type: "get",
            url: "/data/getPayAmountByChannel",
            success: function (data) {
                var ulHtml = "";
                for (var i = 0; i < data.length; i++) {
                    ulHtml += "<li class='clearfix'><span class='pulll_left'> " + data[i].saleChannel +
                        "</span><span class='pulll_right'>" + formatNumber(data[i].salesAmount) + "</span></li>";
                }
                $("#channel ul").html(ulHtml);
            }
        });
    }

    function getMain() {
        $.ajax({
            type: "get",
            url: '/data/getPayOrder',
            beforeSend: function (data) {
            },
            success: function (data) {
                var options1 = {
                    useEasing: true,  // 过渡动画效果，默认ture
                    useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
                    separator: ',',   // 使用千分位时分割符号
                    decimal: '.',   // 小数位分割符号
                    prefix: '',    // 前置符号
                    suffix: '',    // 后置符号，可汉字
                    startVal: data.totalPayNumber >= Number($("#payOrderNum").text().replace(/,/g, "")) ? Number($("#payOrderNum").text().replace(/,/g, "")) : 0
                }
                var options2 = {
                    useEasing: true,  // 过渡动画效果，默认ture
                    useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
                    separator: ',',   // 使用千分位时分割符号
                    decimal: '.',   // 小数位分割符号
                    prefix: '',    // 前置符号
                    suffix: '',    // 后置符号，可汉字
                    decimalPlaces: 2,
                    startVal: data.totalPayAmount >= parseFloat($("#payAmt").text().replace(/,/g, "")) ? parseFloat($("#payAmt").text().replace(/,/g, "")) : 0
                }
                var num1 = new CountUp('payOrderNum', data.totalPayNumber, options1);
                var num2 = new CountUp('payAmt', data.totalPayAmount, options2);
                num1.start();
                num2.start();
            }
        })
    }

    function getPayCustomer() {
        $.ajax({
            type: "get",
            url: '/data/totalPayCustomer',
            beforeSend: function (data) {
            },
            success: function (data) {
                var options = {
                    useEasing: true,  // 过渡动画效果，默认ture
                    useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
                    separator: ',',   // 使用千分位时分割符号
                    decimal: '.',   // 小数位分割符号
                    prefix: '',    // 前置符号
                    suffix: '',    // 后置符号，可汉字
                    startVal: data >= Number($("#payCustomer").text().replace(/,/g, "")) ? Number($("#payCustomer").text().replace(/,/g, "")) : 0
                }
                var num1 = new CountUp('payCustomer', data, options);
                num1.start();
            }
        })
    }

    function formatNumber(amount) {
        if(amount <= 10000) {
            return amount;
        }else {
            var ret;
            if(amount > 10000 && amount < 10000000) {
                ret = parseInt(amount*1.0 / 10000) + "万";
            }else if(amount >= 10000000 && amount < 1000000000000) {
                ret = parseFloat(amount*1.0 / 10000000).toFixed(1) + "亿";
            }else {
                ret = parseFloat(amount*1.0 / 1000000000000).toFixed(1) + "万亿";
            }
            return ret;
        }
    }
</script>
</body>
</html>